<!--
 * @Descripttion: 量表题
 * @version: 
 * @Author: ada.wu
 * @Date: 2024-03-12 10:34:15
 * @LastEditors: ada.wu
 * @LastEditTime: 2024-04-10 10:19:36
-->
<template>
  <div class="matrix-score">
    <div class="score-row" v-for="(item,index) in examSubjectDto.examSubjectValue" :key="index" style="width: 10%;">
      <div @click="handelScore(item,index)" class="circle-icon" :class="{'icon-desc':item.optionDesc!='','active':item._checked}" :data-after-value="item.optionDesc">
        {{item.optionValue}}
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, toRefs } from "vue";
export default defineComponent({
  props: {
    examSubjectDto: {
      type: Object,
      default: "",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  components: {
  },
  setup(props, { emit }) {
    const handelScore = (item: any, index: any) => {
      if (props.disabled) return;
      const { examSubjectValue } = props.examSubjectDto;
      examSubjectValue.forEach((element: any, i: any) => {
        if (index == i) {
          item._checked = !item._checked;
        } else {
          element._checked = false;
        }
      });
      if (item._checked) {
        props.examSubjectDto.examSubjectAns = item.optionValue;
      }else{
        props.examSubjectDto.examSubjectAns=""
      }
    };
    return {
      ...toRefs(props),
      handelScore,
    };
  },
});
</script>

<style lang="scss" scoped>
::v-deep(.van-cell__title) {
  font-weight: 500;
  font-size: 16px;
  color: #262626;
}
::v-deep(.van-cell__label) {
  font-weight: 400;
  font-size: 16px;
  color: #555555;
}
::v-deep(.van-cell:after) {
  border: none;
}
::v-deep(.van-rate) {
  display: flex;
  justify-content: space-between;
}
</style>
<style lang="scss" >
.matrix-score {
  padding: 30px 10px 0px 10px;
  display: flex;
  justify-content: space-between;
}
.option-desc {
  padding: 0 20px 0 0;
  .score-row {
    margin-right: 0;
  }
}
.score-row {
  display: inline-block;
  text-align: center;
  margin-right: 4px;
  white-space: nowrap;
}
.score-row:last-child {
  margin-right: 0;
}

.circle-icon {
  color: #979797;
  background-color: #f0f0f0;
  border-radius: 2px;
  cursor: pointer;
  height: 36px;
  line-height: 36px;
  text-align: center;
  position: relative;
}

.circle-icon.icon-desc {
  &::after {
    content: attr(data-after-value);
    color: #037b86;
    background: #f0fbfc;
    display: block;
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    height: 20px;
    line-height: 20px;
    border-radius: 2px;
    padding: 2px 5px;
  }
  &::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 5px 0 5px;
    border-color: #f0fbfc transparent transparent transparent;
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top: -6px;
  }
}
.circle-icon.active {
  color: #1a1446;
  background-color: #ffd000;
}
</style>

